<template>
	<view class="uni-container">
		<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="name" label="姓名" required>
				<uni-easyinput v-model="formData.name" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="mobile" label="手机号码" required>
				<uni-easyinput v-model="formData.mobile" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="idcard_type" label="证件类型">
				<uni-data-checkbox v-model="formData.idcard_type" :localdata="formOptions.idcard_type_localdata" />
			</uni-forms-item>
			<uni-forms-item name="idcard" label="证件号码">
				<uni-easyinput v-model="formData.idcard" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="address" label="本地住址" required>
				<uni-easyinput v-model="formData.address" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="from_abroad" label="是否来自国外" required>
				<switch @change="binddata('from_abroad', $event.detail.value)" :checked="formData.from_abroad" />
			</uni-forms-item>
			<uni-forms-item name="area_code" label="来源地省市区">
				<uni-data-picker self-field="code" parent-field="parent_code" v-model="formData.area_code" collection="opendb-city-china"
				 orderby="value asc" field="code as value, name as text, eq(type, 2) as isleaf"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item name="from_address" label="来源地地址" required>
				<uni-easyinput v-model="formData.from_address" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="transport" label="交通工具类型">
				<uni-data-checkbox v-model="formData.transport" :localdata="formOptions.transport_localdata" />
			</uni-forms-item>
			<uni-forms-item name="transport_no" label="交通工具班次">
				<uni-easyinput placeholder="飞机航班,火车车次,汽车班次,自驾车牌等" v-model="formData.transport_no" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="status" label="状态" required>
				<uni-data-checkbox v-model="formData.status" :localdata="formOptions.status_localdata" />
			</uni-forms-item>
			<uni-forms-item name="comment" label="备注">
				<uni-easyinput v-model="formData.comment" trim="both" />
			</uni-forms-item>

			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submit">提交</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		validator
	} from '@/js_sdk/validator/returnees-base.js';

	const db = uniCloud.database();
	const dbCollectionName = 'returnees-base';

	function getValidator(fields) {
		let reuslt = {}
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				reuslt[key] = validator[key]
			}
		}
		return reuslt
	}

	export default {
		data() {
			return {
				formData: {
					"name": "",
					"mobile": "",
					"idcard_type": 0,
					"idcard": "",
					"address": "",
					"from_abroad": false,
					"area_code": "",
					"from_address": "",
					"transport": -1,
					"transport_no": "",
					"status": -1,
					"comment": ""
				},
				formOptions: {
					"idcard_type_localdata": [{
							"text": "身份证",
							"value": 0
						},
						{
							"text": "护照",
							"value": 1
						},
						{
							"text": "军官证",
							"value": 2
						},
						{
							"text": "港澳身份证",
							"value": 3
						}
					],
					"transport_localdata": [{
							"text": "飞机",
							"value": 0
						},
						{
							"text": "火车",
							"value": 1
						},
						{
							"text": "长途汽车",
							"value": 2
						},
						{
							"text": "自驾",
							"value": 3
						},
						{
							"text": "轮船",
							"value": 4
						}
					],
					"status_localdata": [{
							"text": "居家隔离",
							"value": 0
						},
						{
							"text": "集中隔离",
							"value": 1
						},
						{
							"text": "解除隔离",
							"value": 2
						},
						{
							"text": "送医",
							"value": 3
						},
						{
							"text": "出院居家隔离",
							"value": 4
						},
						{
							"text": "康复",
							"value": 5
						},
						{
							"text": "死亡",
							"value": 6
						}
					]
				},
				rules: {
					...getValidator(["name", "mobile", "idcard_type", "idcard", "address", "from_abroad", "area_code", "from_address",
						"transport", "transport_no", "status", "comment"
					])
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				this.$refs.form.submit().then((res) => {
					this.submitForm(res)
				}).catch((errors) => {
					uni.hideLoading()
				})
			},

			submitForm(value) {
				// 使用 clientDB 提交数据
				db.collection(dbCollectionName).add(value).then((res) => {
					uni.showModal({
						content: '成功提交，请勿重复提交。感谢登记',
						showCancel: false
					})
					this.$refs.form.resetForm()
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		display: flex;
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}
</style>
